<template>
  <view class="container">
    <!-- 状态栏 -->
    <view class="status-bar"></view>

    <!-- 顶部导航栏 -->
   <view class="top-bar1">
      <view class="top-bar-left">
        <!-- <text class="current-time">9:41</text> -->
		<image class="current-img" src="/static/logo.png"></image>
      </view>
      <view class="top-bar-center">
       <view class="center-top">
		    <text class="shop-title">下沙店</text>
		   <image class="top-img" src="/static/xiangzuo_1.png"></image>
	   </view>
       <view class="center-bottom">
		   <image class="bottom-img" src="/static/shijian-2 1.png"></image>
		   <text class="current-time">2025-6-24 13:20:11</text> 
		   
	   </view>
       
      </view>
      <view class="top-bar-right">
        <image class="settings-fenxiang" src="/static/fenxiang_1.png"></image>
        <image class="settings-icon" src="/static/yingyong-2_1.png" ></image>
      </view>
    </view>

    <!-- 顶部Tab栏 -->
	<view class="contan-main">
		

  <view class="tab-bar">
      <view class="tab-item" :class=" activeTab === 'billiard' ? 'active' : '' " @click="switchTabss('billiard')">
        <view class="tab-text">台桌</view>
		<view class="tab-imgs" v-if="activeTab=='billiard'">
			<image src="/static/Ellipse_10 (Stroke).png"></image>
		</view>
      </view>
      <view class="tab-item " :class="activeTab === 'assistant' ? 'active' : '' " @click="switchTabss('assistant')">
        <view class="tab-text">助教</view>
		<view class="tab-imgs" v-if="activeTab=='assistant'">
			<image src="/static/Ellipse_10 (Stroke).png"></image>
		</view>
      </view>
    </view>

    <!-- 内容区域 -->

      <!-- 台球页面内容 -->
     <view class="billiard-content" v-if="activeTab === 'billiard'">
        <view class="stats-card">
          <view class="stats-left">
            <text class="">待结总额 </text>
            <text class="stats-value"> {{totalfee.total_fee}}</text>
          </view>

        </view>

        <view class="stats-grid">
<!--          <view class="stats-item" v-for="(item, index) in statsItems" :key="index">
            <text class="stats-item-label">{{ item.label }}</text>
            <text class="stats-item-value">{{ item.value }}</text>
          </view> -->
		  <view class="stats-item">
		    <text class="stats-item-label">账单费用</text>
		    <text class="stats-item-value">{{totalfee.billing_fee}}</text>
		  </view>
		  <view class="stats-item">
		    <text class="stats-item-label">商品费用</text>
		    <text class="stats-item-value">{{totalfee.goods_fee}}</text>
		  </view>

		  <view class="stats-item">
		    <text class="stats-item-label">辅导费用</text>
		    <text class="stats-item-value">{{totalfee.tutor_fee}}</text>
		  </view>
        </view>

        <view class="progress-container">
          <view class="progress-bar">
            <view class="progress-fill" :style="{ width: progress + '%' }"></view>
            <view class="progress-marks">
				<view class="mark-ul" :style="{ left: '0%' }">
					 <view class="mark-img" ><image src="/static/Mask_group.png"></image></view>
				    <view class="mark-text">0%</view>
				</view>
             <view class="mark-ul" :style="{ left: '20%' }">
             	 <view class="mark-img" ><image src="/static/Mask_group.png"></image></view>
                 <view class="mark-text">50%</view>
             </view>
			 <view class="mark-ul" :style="{ left: '40%' }">
			 	 <view class="mark-img" ><image src="/static/Mask_group.png"></image></view>
			     <view class="mark-text">80%</view>
			 </view>
			 <view class="mark-ul" :style="{ left: '60%' }">
			 	 <view class="mark-imgs" ><image src="/static/Group_427319264.png"></image></view>
			    
			 </view>
<!--              <view class="mark-img" :style="{ left: '50%' }"><text>50%</text></view>
              <view class="mark-img" :style="{ left: '80%' }"><text>80%</text></view> -->
             <!-- <view class="mark current" :style="{ left: progress + '%' }"><text>{{ progress }}%</text></view> -->
            </view>
          </view>
<!--          <view class="progress-extra">
            <image class="progress-icon" src="/static/fenxiang_1.png" mode="aspectFit"></image>
          </view> -->
        </view>

        <view class="area-tabs-container">
<!--          <view class="floating-tab" :class="activeAreaTab === 'all' ? 'active' : ''" @click="switchAreaTab('all')">
            全部状态
          </view> -->
          <scroll-view class="area-tabs-scroll" scroll-x="true" show-scrollbar="false">
            <view class="area-tabs-scroll-content">
              <text 
                v-for="(item, index) in tablezonelist" 
                :key="index" 
                class="area-tab" 
                :class="activeAreaTab === item.name ? 'active' : ''"
                @click="switchAreaTab(item.name)"
              >
                {{item.name}}
              </text>
            </view>
          </scroll-view>
        </view>
		
		<view class="table-grid">
		   <view class="table-item" v-for="(table, index) in tables" :key="index" @click="navurl(table.id)">
		    <!-- <view :class="['status-tag', table.statusColor]" :style="{ backgroundColor: table.statusColor === 'green' ? '#4cd964' : table.statusColor === 'yellow' ? '#ff9500' : '#ff3b30' }"></view> -->
		     <view class="table-info">
		       <view class="table-number">{{ table.name }}</view>
		       <view class="table-time"><image class="bottom-img" src="/static/shijian-2 1.png"></image><text>{{ table.duration}}小时</text></view>
		     </view>
		     <view class="table-price">￥{{ table.price }}</view>
		   </view>
		 </view>
	</view>
      <view class="assistant-content"  v-if="activeTab === 'assistant'">
        <!-- 助教头部统计 -->
        <view class="assistant-stats-card">
          <text class="stats-title">总助教费</text>
          <text class="stats-value">¥3656.161</text>
        </view>

        <!-- 助教统计数据 -->
       <view class="assistant-stats-grid">
          <view class="stats-item">
            <text class="stats-item-label">辅导费</text>
            <text class="stats-item-value">{{tabtextlist.tutorFee}}</text>
          </view>
         <view class="stats-item">
            <text class="stats-item-label">总工作量</text>
            <text class="stats-item-value">{{tabtextlist.totalWork}}</text>
          </view>
         <view class="stats-item">
            <text class="stats-item-label">总时长</text>
            <text class="stats-item-value">{{tabtextlist.totalDuration}}</text>
          </view>
          <view class="stats-item">
            <text class="stats-item-label">剩余次数</text>
            <text class="stats-item-value">{{tabtextlist.restCount}}</text>
          </view>
        </view>



        <!-- 助教类型标签 -->
        <view class="assistant-tabs"  >
          <text class="assistant-tab active" v-for="(active,index) in tablezonelists" :key="index">{{active.name}}</text>
<!--          <text class="assistant-tab">中级助教</text>
          <text class="assistant-tab">高级助教</text>
          <text class="assistant-tab">实习</text>
          <text class="assistant-tab more">全部状态</text> -->
        </view>

        <!-- 初级助教列表 -->
		<view class="list-view">
			<view class="list-h1">
				<view>初级助教</view>
			</view>
			<view class="assistant-list">
				
			  <view class="assistant-item" v-for="(assistant, index) in assistants" :key="index" @click="navurls()">
			    <image class="assistant-avatar" :src="assistant.image" mode="aspectFill"></image>
			    <view class="item-li">
					<view class="assistant-name">{{ assistant.emp.name }}</view>
					<view class="assistant-status" v-if="assistant.status=='leisure'">正常</view>
					<view class="assistant-statuss" v-if="assistant.status=='normal'">忙碌</view>
<!-- 					<view class="assistant-status" :class="assistant.statusClass">{{ assistant.status }}</view>
					<view class="assistant-status" :class="assistant.statusClass==''">{{ assistant.status }}</view> -->
					<view class="assistant-score">{{ assistant.emp_id }}</view>
				</view>
			
			  </view>
			</view>
		</view>

      </view>
      </view>

    
	


  </view>
</template>

<script>
	import  {getbillingindex,getbillinggetTableList,getbillingtutor,getbillinggetTutorList,getbillingdetail} from '../../api';
import detailsofbilliards from './component/detailsofbilliards.vue';
import store from '@/store'
export default {
  components: {
    detailsofbilliards
  },
  data() {
    return {
      activeTab: 'billiard',
      activeAreaTab: 'all',
      progress: 50,
      statsItems: [
        { label: '台桌待结', value: '669.25' ,status:'1'},
        { label: '助教待结', value: '112.23' ,status:'1'},
        { label: '商品待结', value: '31.0' ,status:'1'},
        { label: '开台数量', value: '9/65' ,status:'1'},
        { label: '台桌预约', value: '0' ,status:'1'},
        { label: '助教预约', value: '0' ,status:'1'},
        { label: '挂单数量', value: '25' ,status:'1'},
        { label: '挂单金额', value: '66956.25' ,status:'1'}
      ],
      tables: [
        { number: '曾台1', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台2', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台5', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台1', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台1', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台1', time: '2分钟', price: '¥0.82', orderCount: 2, statusColor: 'yellow' },
        { number: '曾台1', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' },
        { number: '曾台1', time: '30分钟', price: '¥600', orderCount: 2, statusColor: 'green' }
      ],
      assistants: [
        { name: '妮妮', status: '空闲中', statusClass: 'status-free', score: '1', avatar: '/static/logo.png' },
        { name: '妮妮', status: '空闲中', statusClass: 'status-free', score: '20', avatar: '/static/logo.png' },
        { name: '妮妮', status: '忙碌中', statusClass: 'status-busy', score: '18', avatar: '/static/logo.png' },
        { name: '妮妮', status: '空闲中', statusClass: 'status-free', score: '14', avatar: '/static/logo.png' },
        { name: '妮妮', status: '忙碌中', statusClass: 'status-busy', score: '22', avatar: '/static/logo.png' },
        { name: '妮妮', status: '忙碌中', statusClass: 'status-busy', score: '30', avatar: '/static/logo.png' },
        { name: '妮妮', status: '休息中', statusClass: 'status-rest', score: '11', avatar: '/static/logo.png' },
        { name: '妮妮', status: '空闲中', statusClass: 'status-free', score: '12', avatar: '/static/logo.png' },
        { name: '妮妮', status: '休息中', statusClass: 'status-rest', score: '22', avatar: '/static/logo.png' },
        { name: '妮妮', status: '休息中', statusClass: 'status-rest', score: '30', avatar: '/static/logo.png' }
      ],
	  tablezonelist:[],
	  tablezonelists:[],
	  totalfee:{},
	  tabtextlist:{},
    };
  },
  onShow() {
  	this.init();
	this.initlist();
	this.inittutor();
	this.inittutors();
  },
  methods: {
	 async init(){
		  let res=await getbillingindex();
		  console.log('res台桌',res.msg);
		  this.tablezonelist=res.msg.tableZoneList;
		  this.totalfee=res.msg.totalFee
		  this.progress=res.msg.opening;
	  },
	  async initlist(){
		  let res=await getbillinggetTableList();
		  this.tables=res.data;
		   console.log('table',res.data);
	  },
	  async inittutor(){
		  let res=await getbillingtutor();
		  this.tabtextlist=res.data;
		  this.tablezonelists=res.data.tutorType;
		  console.log('助教',this.tabtextlist);
	  },
	  async inittutors(){
		  let res=await getbillinggetTutorList();
		  this.assistants=res.data
		   console.log('助教列表',res.data);
	  },
	  switchAreaTab(tabName) {
		  this.activeAreaTab = tabName;
		  // 这里可以根据选中的标签筛选台桌数据
	  },
	  switchTabss(aa){
		  this.activeTab=aa;
		  
	  },
    navurl(id) {
     uni.navigateTo({
       url: `/pages/application/component/detailsofbilliards?id=${id}` // 可携带参数
     });
    },
	navurls() {
	 uni.navigateTo({
	   url: '/pages/application/component/teachingassistantdetails' // 可携带参数
	 });
	}
  }
};
</script>

<style lang="scss">
// 全局样式
page {
  --primary-color: #4cd964;
  --secondary-color: #5ac8fa;
  --text-color: #333;
  --text-light: #999;
  --background-color: #f5f5f5;
  --card-bg: #ffffff;
  --success-color: #4cd964;
  --warning-color: #ff9500;
  --danger-color: #ff3b30;
}

.container {
  min-height: 100vh;
  background-image: url('/static/Group_427319262.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 0;
  margin: 0;
}

// 顶部状态栏
.status-bar {
  height: 88rpx;
  // background-color: #4cd964;
}

// 顶部导航栏样式
.top-bar1 {
	margin-top: 16rpx;
	padding: 0 40rpx;
  display: flex;
  // justify-content: space-between;
box-sizing: border-box;
  .top-bar-left {
	  width: 100rpx;
	  height: 100rpx;
    .current-img{
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;

    }
  }

  .top-bar-center {
   margin-left: 16rpx;
    .center-top{
		.shop-title {
			
		  font-size: 32rpx;
		  font-weight: bold;
		}
		.top-img{
			width: 12rpx;
			height: 21rpx;
		}
	}
    .center-bottom{
		margin-top: 12rpx;
		width: 338rpx;
		height: 40rpx;
		box-sizing: border-box;
		padding: 4rpx 18rpx;
		background: rgba(255,255,255,0.1);
		border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 1rpx solid rgba(255,255,255,0.48);
		display: flex;
		.bottom-img{
			width: 32rpx;
			height: 32rpx;
		}
	.current-time {
		margin-left: 4rpx;
    font-size: 24rpx;
	color: #fff;
    }
	}

  }

  .top-bar-right {
	  padding-top: 18rpx;
	  margin-left: 98rpx;
    display: flex;
.settings-fenxiang{
	width: 40rpx;
	height: 40rpx;
}
.settings-icon{
	margin-left: 40rpx;
	width: 40rpx;
	height: 40rpx;
}

  }
}



// 内容区域样式
.contan-main{
	width: 710rpx;
	height: 742rpx;
	box-sizing: border-box;
	margin: 0 20rpx;
	// background-color: #999;
	background-image: url('/static/Group 427319261.png');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	// Tab栏样式
	.tab-bar {
		box-sizing: border-box;
	padding: 38rpx 0  0 20rpx;
	  height: 100rpx;
	  display: flex;
	  // border-bottom: 1rpx solid #e0e0e0;
	
	
	  .tab-item {
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    padding: 10rpx 0;
	     margin-right: 60rpx;
	    .tab-text {
			color: #fff;
	       font-size: 36rpx;
	      font-weight: bold;
	    }
	.tab-imgs{
		margin-top: -15rpx;
		width: 50rpx;
		height: 16rpx;
		image{
			width: 50rpx;
			height: 16rpx;
		}
	}

	  }
	  .active {
	  	// background-color: #ccc;
	    .tab-text {
	  	    font-weight: bold;
	  	   font-size: 40rpx;
	      color: #000;
	    }
	  }
	}
}
  // 统计卡片
  .stats-card {
	  margin-top: 74rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
	box-sizing: border-box;
    .stats-left {
		width: 532rpx;
		height: 68rpx;
		padding-left: 40rpx;
		line-height: 68rpx;
		background: linear-gradient( 90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
      .stats-title {
        font-size: 36rpx;
      }

      .stats-value {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    .stats-right {
      .stats-img {
        width: 180rpx;
        height: 180rpx;
      }
    }
  }

  // 统计网格
  .stats-grid {
	  // background: linear-gradient( 90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);margin-top: 32rpx;
   margin-top: 32rpx;
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    margin-bottom: 30rpx;

    .stats-item {
      // background-color: #fff;
      // padding: 20rpx 15rpx;
      // border-radius: 12rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      // box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

      .stats-item-label {
        font-size: 24rpx;
        color: #999;
      }

      .stats-item-value {
        font-size: 32rpx;
        font-weight: bold;
        margin-top: 10rpx;
        color: #333;
      }
    }
  }

  // 开台进度
  .progress-container {
	  width: 684rpx;
	  height: 145rpx;
	  
  background-image: url('/static/Group_427319263.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-sizing: border-box;
    padding: 88rpx 12rpx 0 12rpx;
	// border-radius: 20rpx;
    .progress-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 20rpx;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        width: 14rpx;
        height: 14rpx;
        background-color: #ff3b30;
        border-radius: 50%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 10rpx;
      }
    }

    .progress-bar {
		margin-left: 20rpx;
		width: 610rpx;
      height: 10rpx;
      background-color: #f0f0f0;
      border-radius: 12rpx;
      position: relative;
      // overflow: hidden;
      margin-bottom: 30rpx;

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #4cd964 0%, #5ac8fa 100%);
        border-radius: 12rpx;
        transition: width 0.3s ease;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: -5%;
          transform: translateY(-50%);
          width: 62rpx;
          height: 50rpx;
  background-image: url('/static/5d8233517b939cc7ae21c8be1249516c95942fe23535a-edkNAd_fw1200_1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
        }
      }

      .progress-marks {
        position: absolute;
        top: 44rpx;
        left: 0;
        width: 100%;
        height: 102rpx;
		// background: #ccc;
        display: flex;
        // justify-content: space-between;
        padding: 0 20rpx;
          .mark-ul{
	position: relative;
	top: 0;
	transform: translateY(-50%);
	// box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
	.mark-img {
	  
	  // width: 20rpx;
	  // height: 20rpx;
	  // background-color: #fff;
	  // border-radius: 50%;
	  image{
		 width: 32rpx;
		  height: 32rpx;
	  }
	}
	.mark-imgs{
		position: relative;
		top: -20%;
		right: -10%;
		// transform: translateY(-50%);
		image{
				 width: 112rpx;
				  height: 64rpx;
		}
	}
	  .mark-text {
		background: rgba(255,255,255,0.5);
		// border-radius: 28rpx 28rpx 28rpx 28rpx;
		border: 1rpx solid rgba(255,255,255,0.48);
	   // padding: 10rpx 12rpx;
	   font-weight: 500;
	   color: #1EBE76;
	   font-size: 16rpx;
	   margin-top: -5rpx;
	   box-sizing: border-box;
		// position: absolute;
	    // top: 30rpx;
	    // left: 50%;
	    // transform: translateX(-50%);
	    // font-size: 24rpx;
	    // color: #999;
	  }
	
}


        .mark.current {
          background-color: #4cd964;
          width: 24rpx;
          height: 24rpx;
          z-index: 1;

          text {
            color: #4cd964;
            font-weight: bold;
          }
        }
      }
    }

    .progress-extra {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: -20rpx;

      .progress-icon {
        width: 40rpx;
        height: 40rpx;
        margin-right: 10rpx;
      }
    }
  }

  // 区域标签容器
  .area-tabs-container {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    background-color: #fff;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 100rpx;
  }
  
  // 浮空的全部状态标签（固定在左侧）
  .floating-tab {
    flex-shrink: 0;
    padding: 15rpx 30rpx;
    background-color: #f5f5f5;
    border-radius: 60rpx;
    font-size: 28rpx;
    color: #999;
    white-space: nowrap;
    min-width: 140rpx;
    text-align: center;
    margin-right: 20rpx;
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
  }
  
  .floating-tab.active {
    background-color: #4CAF50;
    color: #fff;
    font-weight: bold;
    font-size: 32rpx;
    box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
  }
  
  // 可滚动的标签区域（在全部状态右侧）
  .area-tabs-scroll {
    flex: 1;
    height: 100%;
  }
  
  .area-tabs-scroll-content {
    display: flex;
    height: 100%;
    align-items: center;
    padding: 0;
  }
  
  // 标签样式
  .area-tab {
    padding: 15rpx 30rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    color: #333;
    margin-right: 20rpx;
    white-space: nowrap;
    transition: all 0.3s ease;
  }
  
  .area-tab.active {
    font-size: 32rpx;
    color: #000;
    font-weight: bold;
  }

  // 助教内容样式
  .assistant-content {
    // padding: 30rpx;
	  margin-top: 74rpx;
    // display: flex;
    // justify-content: space-between;
    // align-items: center;
	box-sizing: border-box;

    // 助教统计卡片
    .assistant-stats-card {
		width: 532rpx;
		height: 68rpx;
		padding-left: 40rpx;
		line-height: 68rpx;
		background: linear-gradient( 90deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0) 100%);
      .stats-title {
        font-size: 36rpx;
      }

      .stats-value {
        font-size: 36rpx;
        font-weight: bold;
      }
    }

    // 助教统计数据
    .assistant-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20rpx;
      // margin-bottom: 30rpx;
          margin-top: 32rpx;
		  box-sizing: border-box;
      .stats-item {
        // background-color: #fff;
        // padding: 20rpx 15rpx;
        // border-radius: 12rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        // box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);

        .stats-item-label {
          font-size: 26rpx;
          color: #999;
        }

        .stats-item-value {
          font-size: 36rpx;
          font-weight: bold;
          margin-top: 10rpx;
          color: #333;
        }
      }
    }

    // 助教类型标签
    .assistant-tabs {
		margin-top: 32rpx;
		box-sizing: border-box;
      display: flex;
      overflow-x: auto;
      gap: 20rpx;
      margin-bottom: 30rpx;
      padding-bottom: 10rpx;

      .assistant-tab {
        flex-shrink: 0;
        padding: 15rpx 30rpx;
        // background-color: #fff;
        border-radius: 60rpx;
        font-size: 28rpx;
        color: #ccc;
        // box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.05);
      }

      .assistant-tab.active {
        // background-color: #2D3046;
        color: #000;
      }

      .assistant-tab.more {
        color: #999;
      }
    }

    // 助教列表
	.list-view{
		background-color: #fff;
		  padding: 20rpx;
		  		border-radius: 20rpx;
		.list-h1{
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 30rpx;
		}
	}
    .assistant-list {
		

      display: grid;
	
      grid-template-columns: repeat(4, 1fr);
      gap: 5rpx;
	  margin-left: 18rpx;
	  box-sizing: border-box;
      // padding: 10rpx;
box-sizing: border-box;

      .assistant-item {
		  box-sizing: border-box;
		  width: 147rpx;
		  height: 218rpx;
		  margin-bottom: 20rpx;
        background-color: #F5F6F8;
        border-radius: 16rpx;
        // padding: 20rpx;
        // box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
        // display: flex;
        // flex-direction: column;
        // align-items: center;
        position: relative;
        overflow: hidden;
        // height: 280rpx;
        // justify-content: space-between;

        .assistant-avatar {
          width: 147rpx;
          height: 176rpx;
          // border-radius: 50%;
          // margin-bottom: 15rpx;
        }
.item-li{
	padding: 0 10rpx;
   display: flex;
   justify-content: space-between;
width: 146rpx;
height: 42rpx;
box-sizing: border-box;
        .assistant-name {
          font-size: 20rpx;
          // font-weight: bold;
          // color: #333;
          // margin-bottom: 10rpx;
        }

        .assistant-status {
			margin-top: 5rpx;
			width: 70rpx;
			height: 20rpx;
          font-size: 16rpx;
		  text-align: center;
		  line-height: 20rpx;
          // padding: 4rpx 16rpx;
          border-radius: 10rpx;
		  background-color: #4CAF50;
          // margin-bottom: 10rpx;
		  color: #fff;
        }
		.assistant-statuss {
			margin-top: 5rpx;
			width: 70rpx;
			height: 20rpx;
		  font-size: 16rpx;
		  text-align: center;
		  line-height: 20rpx;
		  // padding: 4rpx 16rpx;
		  border-radius: 10rpx;
		  background-color: #ffaa00;
		  color: #fff;
		  // margin-bottom: 10rpx;
		}
		.assistant-status {
			margin-top: 5rpx;
			width: 70rpx;
			height: 20rpx;
		  font-size: 16rpx;
		  text-align: center;
		  line-height: 20rpx;
		  // padding: 4rpx 16rpx;
		  border-radius: 10rpx;
		  // margin-bottom: 10rpx;
		}
		}
        .status-free {
          background-color: #4cd964;
          color: #fff;
        }
        .status-busy {
          background-color: #ff9500;
          color: #fff;
        }
        .status-rest {
          background-color: #ff3b30;
          color: #fff;
        }

        .assistant-score {
          position: absolute;
          top: 0rpx;
          left: 0rpx;
          width: 52rpx;
          height: 46rpx;
         background-image: url('/static/gonghao.png');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
          color: #FF4040;
		  text-align: center;
		  line-height: 46rpx;
          font-size: 22rpx;

        }
      }
    }
  }

  // 适配不同屏幕尺寸
  @media screen and (min-width: 768px) {
    .table-grid {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  @media screen and (min-width: 1024px) {
    .table-grid {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }



  // 台桌网格
  .table-grid {
    display: grid;
	background-color: #fff;
    grid-template-columns: repeat(4, 1fr);
    // gap: 20rpx;
   box-sizing: border-box;
   // margin: 20rpx;
   padding: 20rpx;
    .table-item {
		width: 154rpx;
		height: 184rpx;
      background-color: #1EBE76;
      border-radius: 12rpx;
      padding: 12rpx;
       box-sizing: border-box;
      position: relative;
      margin-bottom: 20rpx;
      .table-info {

        margin-bottom: 20rpx;

        .table-number {
          font-size: 26rpx;
          font-weight: bold;
          color: #fff;
        }

        .table-time {
			margin-top: 6rpx;
          font-size: 20rpx;
          color: #fff;
width: 118rpx;
height: 36rpx;
background: linear-gradient( 90deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
box-sizing: border-box;
          border-radius:15rpx;
		  .bottom-img{
			  position: relative;
			  top: 5rpx;
			  left: 12rpx;
			  // margin-top: 8rpx;
			  width: 24rpx;
			  height: 24rpx;
		  }
		 text{
			 margin-left: 15rpx;
		 }
        }
      }

      .table-price {
		  box-sizing: border-box;
		  width: 100%;
		  display: flex;
		  justify-content: end;
        font-size: 28rpx;
		margin-top: 30rpx;
        font-weight: bold;
        color: #fff;
        // margin-bottom: 15rpx;
      }
      // 状态标签
      .status-tag {
        position: absolute;
        top: 25rpx;
        right: 25rpx;
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
      }

      .status-tag.green {
        background-color: #4cd964;
      }

      .status-tag.yellow {
        background-color: #ff9500;
      }

      .status-tag.red {
        background-color: #ff3b30;
      }
    }
  }



</style>